<template>
  <div>
    App: {{money}}
    <hr/>
    <Parent/>
  </div>
</template>

<script>
import { provide, ref } from 'vue';
import Parent from './Parent.vue'
export default {
  components: {
    Parent
  },
  setup () {
    const money = ref(100)
    // !#1 通过 provide 提供数据
    provide('money', money)
    provide('age', 18)
    // !#3 数据在哪儿来的就在哪儿修改
    const updateMoney = (m) => {
      money.value -= m
    }
    provide('updateMoney', updateMoney)
    return { money }
  }
}
</script>

<style lang="scss" scoped>

</style>